<template>
  <div class="files-main-box">
    <div class="head-box">
      <PageHeader :parActiveName="activeName" />
    </div>
    <div class="search-and-add-box">
      <div class="search-box">
        <Search :type="type" ref="serachRef" :setShowFileData="setShowFileData" :typeOptions="typeOptions" />
      </div>
      <div class="file-upload-box">
          <div @click="openAddItem"><i class="el-icon-plus"></i></div>
      </div>
    </div>
    <div class="search-label">
            <div class="label-box">
              <el-select
                style="width: 100%;"
                v-model="labelItem"
                filterable 
                allow-create
                popper-class="file-type-box"
                placeholder="请选择标签"
                @change="selectLaben"
                >
                <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.dicvalue" :value="item.dickey"></el-option>
              </el-select>
            </div>
          </div>
    <!-- <div class="test-step-box" v-if="false">
      <div
        class="test-step-item"
        v-for="(item, index) in titleArr"
        :key="index"
        @click="selectItem(index)"
      >
        {{ item.stageName }}
      </div>
    </div>
    <div class="step-box" v-if="false">
      <div class="step-item" v-for="(item, index) in titleArr" :key="index">
        <div @click="selectItem(index)">
          <i
            :class="
              active === index
                ? 'iconfont icon-yuanquanxuanzhong'
                : 'iconfont icon-yuanquan'
            "
          ></i>
        </div>
        <div class="step-title" @click="selectItem(index)">
          {{ item.stageName }}
        </div>
        <div class="icon" v-if="index != 6">
          <i class="iconfont icon-jiantou_yemian_xiangyou"></i>
        </div>
        <div class="icon" v-else>
          <i class="iconfont icon-24gf-ellipsis" @click="getAllProjectData"></i>
        </div>
      </div>
    </div> -->
    <div class="table-box">
      <Table
        :tableData="showProData"
        :activeName="activeName"
        :openAnnex="openAnnex"
        :openUpdate="openUpdate"
        :openDetail="openDetail"
        :sortArr="sortArr"
        :getAnnexListData="getAnnexListData"
      />
    </div>
    <div class="pagination-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <div class="drawer-box">
        <AnnexDrawer ref="annexRef" :drawer="drawer" :projectRow="projectRow" />
        <DetailDrawer ref="detailRef" :drawer="drawer" :projectRow="projectRow"  :getAnnexListData="getAnnexListData" />
        <UpdateDrawer ref="updateRef" :drawer="drawer" :projectRow="projectRow" :typeOptions="typeOptions" :unitOptions="unitOptions" :organOptions="organOptions" :getAnnexListData="getAnnexListData" />
        <AddItemDrawer ref="addItemRef" :drawer="drawer" :projectRow="projectRow" :typeOptions="typeOptions" :unitOptions="unitOptions" :organOptions="organOptions" :getAnnexListData="getAnnexListData" />
    </div>
    <div>
    </div>
  </div>
</template>

<script>
import PageHeader from '@/components/PageHeader.vue'
import Search from '@/components/Search.vue'
import Table from './ui/Table.vue'
import AnnexDrawer from './ui/AnnexDrawer.vue'
import UpdateDrawer from './ui/UpdateDrawer.vue'
import AddItemDrawer from './ui/AddItemDrawer.vue'
import DetailDrawer from './ui/DetailDrawer.vue'

import { getAnnexListDataApi, getDictionaryListApi  } from '@/api/index'
export default {
  data () {
    return {
      // 记录列表
      type: 'fileList',
      // 控制添加记录的弹框
      showAddDialog: false,
      
      // 文件上传地址
      uploadUrl: 'apis/api/FilesUpload',
      // 控制状态点高亮
      activeName: 'fifth',
      // 状态数组
      titleArr: [
        {
          proStage: 'SalesResearch',
          stageName: '售前调研'
        },
        {
          proStage: 'Develop',
          stageName: '研发阶段'
        },
        {
          proStage: 'ElectricImplement',
          stageName: '电气实施'
        },
        {
          proStage: 'Design',
          stageName: '产品设计'
        },
        {
          proStage: 'DebugTogether',
          stageName: '联调阶段'
        },
        {
          proStage: 'Waiting4Sign',
          stageName: '等待验收'
        },
        {
          proStage: 'Finish',
          stageName: '已完成'
        }
      ],
      // 展示的项目源数据
      showProData: [],
      // 抽屉是否弹出
      drawer: false,
      // 类型列表
      typeOptions: [
        {
          lable: '全部类型',
          value: '全部类型'
        },
        {
          lable: '发明专利',
          value: '发明专利'
        },
        {
          lable: '实用新型',
          value: '实用新型'
        },
        {
          lable: '软著(含测试报告)',
          value: '软著(含测试报告)'
        },
        {
          lable: '资质文件',
          value: '资质文件'
        },
        {
          lable: '计量报告',
          value: '计量报告'
        },
        {
          lable: '获奖证书',
          value: '获奖证书'
        },
        {
          lable: '人员证书',
          value: '人员证书'
        },
        {
          lable: '验收报告',
          value: '验收报告'
        },
        {
          lable: '用户证明',
          value: '用户证明'
        },
        {
          lable: '科技评审',
          value: '科技评审'
        },
        {
          lable: '论文杂志',
          value: '论文杂志'
        },
        {
          lable: '网页信用查询',
          value: '网页信用查询'
        },
        {
          lable: '合同扫描件',
          value: '合同扫描件'
        },
        {
          lable: '其他',
          value: '其他'
        }
      ],
      // 单位数据源
      unitOptions: [],
      // 发证机关
      organOptions: [],
      // 当前点击的项目
      projectRow: null,
      tableActive: 1,
      keyWord: '',
      // 分页
      currentPage: 1,
      pageSize: 10,
      total: 100,
      searchData: {
        keyWord: '',
        type: ''
      },
      sortArr: [
        {
          sortBy: '证书编号',
          isForward: true
        },
        {
          sortBy: '证书简称',
          isForward: true
        },
        {
          sortBy: '证书类型',
          isForward: true
        },
        {
          sortBy: '主要内容',
          isForward: true
        },
        {
          sortBy: '证书所属人',
          isForward: true
        },
        {
          sortBy: '下证日期',
          isForward: true
        },
        {
          sortBy: '有效开始日期',
          isForward: true
        },
        {
          sortBy: '有效截止日期',
          isForward: true
        }
      ],
      labelItem: ''
    }
  },
  // watch: {
  //   showProData (nv, ov) {
  //     this.showProData.forEach((item, index) => {
  //       this.showProData[index].procity = item.proprovince + '-' + item.procity
  //       let stageItem = this.titleArr.find(stageItem => {
  //         return item.prostage === stageItem.proStage
  //       })
  //       // this.showProData[index].stageName = stageItem.stageName
  //     })
  //   }
  // },
  components: {
    PageHeader,
    Table,
    Search,
    AnnexDrawer,
    DetailDrawer,
    UpdateDrawer,
    AddItemDrawer
  },

  mounted () {
    let data = {
      skipcount: 0,
      maxresultcount: 10
    }
    this.getAnnexListData(data)
    this.getFileTypeOptions()
  },

  methods: {
    timeChange (val) {
      console.log('新增时间----->', val, '---------', this.validityTime)
    },

    // 获取类型列表
    async getFileTypeOptions () {
      let data = {
        skipcount: 0,
        maxresultcount: 100000
      }
      let res = await getDictionaryListApi(data)
      this.typeOptions = []
      
      res.dicdatas.forEach(item => {
        switch (item.typename) {
        case 'Type':
          this.typeOptions.push(item)
          break
        case 'Company':
          this.unitOptions.push(item)
          console.log('新增时间----->', item)
          break
        case 'Issuing':
          this.organOptions.push(item)
          break
        }
      })
    },
    
    // 搜索赋值
    async setShowFileData (data) {
      this.searchData.keyWord = data.keyWord
      this.searchData.type = data.type
      this.getAnnexListData(data)
      // this.showProData = res
    },

    // 获取全部记录数据
    async getAnnexListData (params) {
      this.active = null
      params.skipcount = (this.currentPage - 1) * this.pageSize
      params.maxresultcount = this.pageSize
      console.log('跳转页码----->', params)
      // let params = {
      //   keyword: this.searchData.keyWord,
      //   type: this.searchData.type,
      //   skipcount: (this.currentPage - 1) * this.pageSize,
      //   maxresultcount: this.pageSize
      // }
      let data = []
      this.sortArr.forEach(item => {
        data.push({
          sortBy: item.sortBy,
          sortOrder: item.isForward ? 'asc' : 'desc'
        })
      })
      let res = await getAnnexListDataApi(params, data)
      this.total = res.total
      this.showProData = res.details
      console.log('获取文件列表----->', res)
    },

    // 阶段选择事件
    async selectLaben () {
      console.log('选择标签---->', this.labelItem)
      this.$refs.serachRef.getFilesList(this.labelItem)
    },

    // 打开新增抽屉
    openAddItem (row) {
      this.projectRow = { ...row }
      this.$refs.addItemRef.openDrawer(row)
    },

    // 打开附件抽屉
    openAnnex (row) {
      this.projectRow = { ...row }
      this.$refs.annexRef.openDrawer(row)
    },

    // 打开编辑抽屉
    openDetail (row) {
      this.projectRow = { ...row }
      this.$refs.detailRef.openDrawer(row)
    },

    // 打开编辑抽屉
    openUpdate (row) {
      this.projectRow = { ...row }
      this.$refs.updateRef.openDrawer(row)
    },

    // 获取当前项目的文件列表
    async getProFile (code) {
      let data = {
        procode: code
      }
      let res = await getProFileListApi(data)
      this.fileList = []
      console.log('aaaaaaa--------》', res)
      res.forEach(item => {
        this.fileList.push({
          name: item.filename,
          url: item.guid,
          guid: item.guid
          
        })
      })
    },
    // 文件列表移除文件时的钩子
    handleRemove (file, fileList) {
      this.delProFile(file.guid)
    },
    // 点击文件列表中已上传的文件时的钩子
    async handlePreview (file) {
      console.log('点击的文件--->', file, res)
    },
    // 限制文件大小
    handleExceed (files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
      )
    },
    // 文件上传成功
    uploadSuccess (response, file, fileList) {
      console.log('提交新增----->', this.fileId, '---------', response, file, fileList)
    },
    // 文件删除之前
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    // 删除文件
    async delProFile (id) {
      let data = {
        guid: id
      }
      let res = await delProFileApi(data)
    },
    // 修改每页大小
    async handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      let data = {
        keyWord: this.$refs.serachRef.input,
        type: (this.$refs.serachRef.fileType === '全部类型') ? '' : this.$refs.serachRef.fileType,
        timetype: this.$refs.serachRef.timType,
        starttime: this.$refs.serachRef.time.length ? fixTime(this.$refs.serachRef.time[0]) : '',
        endtime: this.$refs.serachRef.time.length ? fixTime(this.$refs.serachRef.time[1]) : '',
        company: this.$refs.serachRef.unit,
        isValid: this.$refs.serachRef.isValid ? this.$refs.serachRef.isValid : null,
        skipcount: 0,
        maxresultcount: 10
      }
      this.getAnnexListData(data)
    },
    // 切换页码
    async handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      console.log(`每页 ${val} 条`)
      this.currentPage = val
      let data = {
        keyWord: this.$refs.serachRef.input,
        type: (this.$refs.serachRef.fileType === '全部类型') ? '' : this.$refs.serachRef.fileType,
        timetype: this.$refs.serachRef.timType,
        starttime: this.$refs.serachRef.time.length ? fixTime(this.$refs.serachRef.time[0]) : '',
        endtime: this.$refs.serachRef.time.length ? fixTime(this.$refs.serachRef.time[1]) : '',
        company: this.$refs.serachRef.unit,
        isValid: this.$refs.serachRef.isValid ? this.$refs.serachRef.isValid : null,
        skipcount: 0,
        maxresultcount: 10
      }
      this.getAnnexListData(data)
    }
  }
}
</script>

<style lang="scss" scoped>
.files-main-box {
  height: 100vh;

  /* background: #f3f6ff; */
}
.search-and-add-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 80%;
  margin-left: 10%;

  /* border: 1px solid blue; */
.file-upload-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 4%;
  height: 40px;
  margin-top: 10px;

  /* border: 1px solid green; */
  >div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 80%;
  color: #FFF;
  font-size: 16px;
  background: #85ce61;
  border-radius: 5px;
  &:hover {
    cursor: pointer;
  }
  &:active {
    background: rgba($color: #85ce61, $alpha: 50%);
  }
  }
}
}
.search-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 80%;
  margin-left: 10%;

  /* border: 1px solid red; */
}
.test-step-box {
  display: flex;

  /* border: 1px solid red; */
  width: 60%;
  margin-top: 10px;
  margin-left: 20%;
  .test-step-item {
    width: 14%;

    /* border: 1px solid red; */
    height: 40px;
    color: #fff;
    line-height: 40px;
    text-align: center;
    background-image: url("../../assets/back-img3.png");
    background-size: 100% 100%;
  }
}
.table-box {
  width: 80%;
  height: 75%;
  margin-top: 10px;
  margin-left: 10%;

  /* border: 1px solid blue; */

  /* overflow: auto; */
}
.el-table {
  height: 450px;
}
.step-box {
  /* border: 1px solid red; */
  display: flex;

  /* height: 50px; */
  width: 90%;
  margin-top: 10px;
  margin-left: 10%;
  .step-item {
    display: flex;
    width: 160px;
    height: 35px;
    line-height: 200%;

    /* background: #f3f6ff; */
    .step-title {
      width: 70px;
      margin-right: 20px;
      color: black;
    }
    .icon {
      width: 30px;
    }
  }
  .step-item:hover {
    cursor: pointer;
  }
}
.head-step {
  /* border: 1px solid red; */
  display: flex;
  width: 600px;
  height: 40px;
  margin: 10px;
  margin-left: 150px;
  > div {
    width: 150px;
    height: 40px;
    margin-right: 10px;
    line-height: 40px;
    text-align: center;
    border: 1px solid #aeb0b6;
  }
  > div:hover {
    background: rgba($color: #aeb0b6, $alpha: 50%);
    cursor: pointer;
  }
}
.screen-box {
  /* border: 1px solid red; */
  width: 80%;
  margin-left: 150px;
  > input {
    height: 25px;
    margin-top: 5px;
    margin-right: 5px;
    border: 1px solid #e4e6ec;
  }
}
.el-date-editor {
  margin-right: 5px;
}
.el-tabs__nav-scroll {
  /* border: 1px solid red; */
  width: 600px;
  margin-left: 150px;
}
.pagination-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 80%;
  height: 30px;
  margin-top: 10px;
  margin-left: 10%;

  /* background: #000; */
}
.dialog-box {
  .form-box {
    display: flex;

    /* border: 1px solid red; */
    >div {
      height: 100%;

      /* border: 1px solid green; */
      >div {
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 30px;
        margin-top: 10px;
      }
    }
    .left-box {
      width: 20%;
      >div {
        justify-content: flex-end;
      }
    }
    .right-box {
      width: 80%;
      >div {
        >input {
          width: 90%;
          height: 90%;
        }
        .el-date-picker {
          width: 90%;
          height: 90%;
        }
      }
    }
  }
   .btn-box {
    display: flex;
    justify-content: end;
    width: 100%;
    margin: 10px 0;

    /* border: 1px solid #c40f0f; */
    > div {
      width: 60px;
      height: 32px;
      margin-left: 10px;
      color: #fff;
      font-size: 12px;
      line-height: 32px;
      text-align: center;
      background: #85ce61;
      border-radius: 5px;
    }
    > div:hover {
      background: rgba($color: #85ce61, $alpha: 80%);
      cursor: pointer;
    }
    .sub-btn {
      color: #fff;
      background: #67c23a;
    }
    .sub-btn:hover {
      color: #fff;
      background: #85ce61;
      border-color: #85ce61;
      cursor: pointer;
    }
    .remove-btn {
      color: #000;
      background: rgba($color: #000, $alpha: 0%);
      border: 1px solid #dcdfe6;
    }
    .remove-btn:hover {
      color: #409eff;
      background-color: #ecf5ff;
      border-color: #c6e2ff;
      cursor: pointer;
    }
  }
}

@media screen and (width <= 768px) {
  .main-box {
    /* background: #f3f6ff; */
  }
  .page-btn {
    display: flex;
    width: 100%;

    /* border: 1px solid blue; */
    height: 40px;
    margin-top: 10px;
    margin-left: 12px;
    line-height: 40px;
    > div {
      width: 20%;
      height: 20px;
      margin: 0 5px;
      font-size: 12px;
      line-height: 20px;
      text-align: center;
      border: 1px solid #dad2d2;
    }
    > div:hover {
      cursor: pointer;
    }
  }
  .search-box {
    /* border: 1px solid red; */
    width: 200px;
    margin-top: 20px;
    margin-left: 10%;
  }
  .test-step-box {
    display: flex;

    /* border: 1px solid red; */
    width: 100%;
    margin-top: 10px;
    margin-left: 5px;
    .test-step-item {
      width: 14%;

      /* border: 1px solid red; */
      height: 20px;
      color: #fff;
      font-size: 10px;
      line-height: 20px;
      text-align: center;
      background-image: url("../../assets/back-img3.png");
      background-size: 100% 100%;
    }
  }
  .table-box {
    /* border: 1px solid blue; */
    width: 99%;
    height: 500px;
    margin-top: 10px;
    margin-left: 2px;

    /* overflow: auto; */
  }
  .step-box {
    /* border: 1px solid red; */
    display: flex;

    /* height: 50px; */
    width: 90%;
    margin-top: 10px;
    margin-left: 10%;
    .step-item {
      display: flex;
      width: 160px;
      height: 35px;
      line-height: 200%;

      /* background: #f3f6ff; */
      .step-title {
        width: 70px;
        margin-right: 20px;
        color: black;
      }
      .icon {
        width: 30px;
      }
    }
    .step-item:hover {
      cursor: pointer;
    }
  }
  .head-step {
    /* border: 1px solid red; */
    display: flex;
    width: 600px;
    height: 40px;
    margin: 10px;
    margin-left: 150px;
    > div {
      width: 150px;
      height: 40px;
      margin-right: 10px;
      line-height: 40px;
      text-align: center;
      border: 1px solid #aeb0b6;
    }
    > div:hover {
      background: rgba($color: #aeb0b6, $alpha: 50%);
      cursor: pointer;
    }
  }
  .screen-box {
    /* border: 1px solid red; */
    width: 80%;
    margin-left: 150px;
    > input {
      height: 25px;
      margin-top: 5px;
      margin-right: 5px;
      border: 1px solid #e4e6ec;
    }
  }
  .el-date-editor {
    margin-right: 5px;
  }
  .el-tabs__nav-scroll {
    /* border: 1px solid red; */
    width: 600px;
    margin-left: 150px;
  }
}
</style>